<template>
	<view :class="['search', vuiData.fixed ? 'fixed' : '']">
		<view class="city clamp clamp-1" v-if="vuiData.ct" @click="goCity">
			<image :src="icons.c" mode="widthFix"></image><text>{{city}}</text>
		</view>
		<view class="hover" @click="goSearch">
			<image :src="icons.s" mode="widthFix"></image>
			<text>{{vuiData.tips}}</text>
		</view>
		<view class="mes" v-if="vuiData.ms" @click="goMes">
			<view class="i-dot" v-if="hasDot"></view>
			<image :src="icons.m" mode="widthFix"></image>
		</view>
		<vui-scope-loc :vuiData="props" @action="showLoc"></vui-scope-loc>
	</view>
</template>

<script>
	import app from '@/common/index.js'
	import VuiScopeLoc from '@/components/default/vui-scope.vue'
	
	export default {
		name: 'vui-csm',
		props: ['vuiData'],
		data() {
			return {
				userInfo: {},
				city: '',
				icons: {},
				props: {
					scope: 1,
					isShow: false,
					title: '位置服务',
					content: '申请获取以下权限\n获得您的当前位置，以便为您推送附近商户'
				}
			}
		},
		onLoad(query) {},
		mounted() {
			// 获取本地缓存用户信息
			const uinfoCache = uni.getStorageSync('uinfo'),
				uc = uinfoCache.city, // 用户绑定的城市
				sc = this.$store.state.curLocation.city; // 当前选择的城市
			this.userInfo = uinfoCache;
			this.city = !!uc ? uc : this.getLoc();
		},
		onShow() {
			const c = this.$store.state.city,
				b = uni.getStorageSync('uinfo'),
				d = b ? (b.area_name.split(' '))[1] : '',
				e = this.$store.state.curLocation.city;
			this.city = c ? c : (d ? d : e);
		},
		computed: {
			has() {
				this.icons = this.vuiData.icons;
			}
		},
		components: {
			VuiScopeLoc,
		},
		methods: {
			/**
			 * @des 获取消息
			 */
			getMes() {
				app.request({
					url: 'entry/wxapp/healthy/Message/unread',
					data: {
						type: -1,
						openid: this.userInfo.openId,
					}
				}, ret => {
					const s = ret.data;
					if(s.code) {
						this.hasDot = s.data ? true : false;
					}else {
						uni.showToast({
							title: s.msg || '数据获取错误~',
							icon: 'none'
						})
					}
				})
			},
			showLoc(b) {
				this.props.isShow = b;
				!b&&this.getLoc();
			},
			/**
			 * @des 获取当前定位
			 */
			getLoc() {
				const locCache = this.$store.state.curLocation;
				if(app.isCObj(locCache)) {
					this.city = locCache.city;
				}else {
					app.loc(res => {
						console.log(res);
						if(res.status) {
							let ad_info = res.result.address_component, curLoction = {};
							curLoction = {
								"province": ad_info.province,
								"city": ad_info.city,
								"district": ad_info.district,
								"adrs": res.result.address,
							};
							this.city = ad_info.city;
							this.$store.commit('setCurLocation', curLoction);
						}else {
							this.props.isShow = true;
						}
					})
				}
			},
			/**
			 * @des 打开定位
			 */
			goCity() {
				uni.navigateTo({
					url: '/pages/city/index'
				})
			},
			/**
			 * @des search
			 */
			goSearch() {
				this.$emit('vuiSearch');
			},
			/**
			 * @des 打开消息
			 */
			goMes() {
				uni.navigateTo({
					url: '/mess/pages/msgcat/index'
				})
			}
		}
	}
</script>

<style>
	/* search */
	.animation {display: block!important;}
	.search {display: flex; align-items:center; width: 100%; height: 110upx; padding: 25upx 20upx; background-color: rgba(0,0,0,.3); z-index: 111;}
	.search .city {flex: 2; text-align: left;}
	.search .city text {color: #fff;}
	.search .city image {width: 46upx; padding-right: 14upx; vertical-align: middle;}
	.search .hover {flex: 6; height: 60upx; padding-left: 30upx; border-radius: 60rpx; background-color: rgba(255,255,255,.4); text-align: left;}
	.search .hover image {width: 34upx; margin-right: 16upx;}
	.search .hover text {font-size: 26upx; color: #fff; line-height: 60upx;}
	.search .input {position: absolute; left: 24rpx; right: 24rpx; height: 60rpx; box-shadow: 0 2rpx 4rpx #eee; border-radius: 60rpx; vertical-align: middle; background-color: #fff; text-align: left; display: none;}
	.search .input input {width: 70%; height: 60rpx; float: left; padding-left: 36rpx; line-height: 60rpx; font-size: 26rpx;}
	.search .input label {width: 30rpx; height: 60rpx; padding: 0 25rpx; border-radius: 0 60rpx 60rpx 0; float: right; line-height: 50rpx; background-color: #0095dd; color: #fff;}
	.search .mes {display: table-column; flex: 1; text-align: right;}
	.search .mes image {width: 50upx;}
	@-webkit-keyframes searchAnimation{
	  0% {opacity: 1;}
	  100% {opacity: 0; display: block!important;}
	}
	.mes {position: relative;}
	.i-dot {position: absolute; right: -10upx; width: 18upx; height: 18upx; border-radius: 100%; background-color: red;}
	.fixed {position: absolute;}
</style>
